<template>
  <div class="app-container">
    <!--查询条件-->
    <el-form ref="queryForm" :model="searchObj" :inline="true" size="small" class="demo-form-inline">
      <el-form-item label="医院名称" prop="hosname">
        <el-input  v-model="searchObj.hosname" @keyup.enter.native="getList()" placeholder="请输入医院名称"/>
      </el-form-item>
      <el-form-item label="医院编号" prop="hoscode">
        <el-input v-model="searchObj.hoscode" @keyup.enter.native="getList()" placeholder="请输入医院编号"/>
      </el-form-item>
      <el-button type="primary" size="small" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" size="small" icon="el-icon-refresh" @click="resetHospSet('queryForm')">重置</el-button>
    </el-form>

    <!--工具条-->
    <el-row style="margin-bottom: 6px;">
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="saveHospitalSet">新增</el-button>
      <el-button type="success" size="mini" :disabled="single" icon="el-icon-edit" @click="updateHospitalSet">修改</el-button>
      <el-button type="danger" size="mini" :disabled="multiple" icon="el-icon-delete" @click="batchRemoveHospitalSet">批量删除</el-button>
    </el-row>

    <!--数据列表-->
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      :data="list"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <!--复选框-->
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="hosname" label="医院名称"/>
      <el-table-column prop="hoscode" label="医院编号"/>
      <el-table-column prop="apiUrl" label="api基础路径"width="220"/>
      <el-table-column prop="contactsName" label="联系人姓名"/>
      <el-table-column prop="contactsPhone" label="联系人手机"/>
      <el-table-column label="状态" width="80">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            @change="lockHostSet(scope.row.id, scope.row.status)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini"
                     icon="el-icon-edit" @click="updateHospitalSet(scope.row)">修改</el-button>
          <el-button type="text" size="mini"
                     icon="el-icon-delete" @click="removeHospSet(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[5, 10, 20, 50]"
      @size-change="handleSizeChange"
      @current-change="getList"/>

    <!--添加或修改医院设置对话框-->
    <el-dialog :title="title" :visible.sync="open" width="400px" top="50px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="医院名称" prop="hosname">
          <el-input v-model="form.hosname"  placeholder="请输入医院名称"></el-input>
        </el-form-item>
        <el-form-item label="医院编号" prop="hoscode">
          <el-input v-model="form.hoscode"  placeholder="请输入医院编号"></el-input>
        </el-form-item>
        <el-form-item label="api基础路径" prop="apiUrl">
          <el-input v-model="form.apiUrl"  placeholder="请输入api基础路径"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名" prop="contactsName">
          <el-input v-model="form.contactsName"  placeholder="请输入联系人姓名"></el-input>
        </el-form-item>
        <el-form-item label="联系人手机" prop="contactsPhone">
          <el-input v-model="form.contactsPhone"  placeholder="请输入联系人手机"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import hospset from '@/api/hosp/hospset.js'

  export default {
    // 定义变量和初始值
    data() {
      var validatorPhone = function (rule, value, callback) {
        if (value == undefined || value == '') {
          callback(new Error('联系人手机不能为空'))
        } else if (!/^1\d{10}$/.test(value)) {
          callback(new Error('联系人手机格式错误'))
        } else {
          callback()
        }
      };
      return {
        loading: true, // 遮罩层
        current: 1, // 当前页
        limit: 5, // 每页显示记录数
        searchObj: {}, // 查询参数
        list: [], // 数据列表
        total: 0, // 总记录数
        single: true, // 非单个禁用
        multiple: true, // 非多个禁用
        multipleSelection: [], // 批量选择时，选择的记录列表
        title: "",  // 弹出层标题
        open: false, // 是否显示弹出层
        form: {}, // 表单参数
        rules: { // 表单校验
          hosname: [
            { required: true, message: "医院名称不能为空", trigger: "blur" }
          ],
          hoscode: [
            { required: true, message: "医院编号不能为空", trigger: "blur" }
          ],
          apiUrl: [
            { required: true, message: "api基础路径不能为空", trigger: "blur" }
          ],
          contactsName: [
            { required: true, message: "联系人姓名不能为空", trigger: "blur" }
          ],
          contactsPhone: [
            { required: true, validator: validatorPhone, trigger: "blur" }
          ]
        }
      }
    },

    // 页面渲染成功后获取数据
    created() {
      this.getList()
    },

    methods: {
      // 加载列表数据
      getList(page = 1) { // 添加当前页参数
        this.loading = true;
        this.current = page;
        hospset.getPageList(this.current, this.limit, this.searchObj).then(response => { // 请求成功
          this.list = response.data.records;
          this.total = response.data.total;
          this.loading = false;
        }).catch(error => { // 请求失败
          console.log(error);
          this.loading = false;
        })
      },
      handleSizeChange(limit) {
        this.limit = limit;
        this.getList();
      },
      // 当表格复选框选项发生变化的时候触发
      handleSelectionChange(val) {
        this.multipleSelection = val.map(item => item.id);
        this.single = val.length!=1
        this.multiple = !val.length
      },
      // 删除
      removeHospSet(id) {
        this.$confirm('此操作将永久删除该医院设置信息，是否继续？', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return hospset.removeHospSet(id);
        }).then(() => {
          this.getList(this.current);
          this.$message({
            type: 'success',
            message: '删除成功！'
          });
        }).catch(() => {

        })
      },
      // 批量删除
      batchRemoveHospitalSet() {
        const ids = this.multipleSelection;
        this.$confirm('此操作将永久删除选中的' + ids.length + '条记录，是否继续？', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return hospset.batchRemoveHospitalSet(ids);
        }).then(() => {
          this.getList(this.current);
          this.$message({
            type: 'success',
            message: '删除成功！'
          });
        }).catch(() => {

        })
      },
      // 新增
      saveHospitalSet() {
        // 重置表单
        this.reset();
        this.open = true;
        this.title = "添加医院设置信息";
      },
      // 修改
      updateHospitalSet(row) {
        // 重置表单
        this.reset();
        const id = row.id || this.multipleSelection;
        hospset.getHospSet(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改医院设置信息";
        }).catch(error => {
          console.log(error);
        })
      },
      // 锁定与取消锁定
      lockHostSet(id, status) {
        let action = status == 1 ? '取消锁定' : '锁定';
        this.$confirm('此操作将' + action + '该医院设置，是否继续？', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return hospset.lockHostSet(id, status);
        }).then(() => {
          // 刷新
          this.getList(this.current);
          // 提示信息
          this.$message({
            type: 'success',
            message: action + '成功！'
          });
        }).catch(() => {
          // 刷新
          this.getList(this.current);
        })
      },
      // 重置搜索条件
      resetHospSet(formName) {
        this.$refs[formName].resetFields();
        this.getList();
      },
      // 取消
      cancel() {
        this.open = false;
        // 重置表单
        this.reset();
      },
      // 重置表单
      reset() {
        this.form = {};
        if (this.$refs['form']) {
          this.$refs['form'].resetFields();
        }
      },
      // 保存
      submitForm() {
        this.$refs["form"].validate(valid => {
          if(!valid) {
            return;
          }
          if(this.form.id != undefined) {
            hospset.updateHospSet(this.form).then(response => {
              this.$message({
                type: 'success',
                message: '修改成功！'
              });
              this.open = false;
              this.getList(this.current);
            }).catch(error => {
              console.log(error);
            })
          } else {
            hospset.saveHospSet(this.form).then(response => {
              this.$message({
                type: 'success',
                message: '新增成功！'
              });
              this.open = false;
              this.getList(this.current);
            }).catch(error => {
              console.log(error);
            })
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>
